import React from 'react';
import styled from 'styled-components';

const ToolbarContainer = styled.div`
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
`;

const ToolButton = styled.button`
  padding: 0.5rem;
  border: none;
  background-color: transparent;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 0.25rem;

  &:hover {
    background-color: #e0e0e0;
  }

  &:active {
    background-color: #d0d0d0;
  }
`;

interface ToolbarProps {
  onInsert: (text: string) => void;
}

export const Toolbar: React.FC<ToolbarProps> = ({ onInsert }) => {
  const tools = [
    { label: 'H1', text: '# ' },
    { label: 'H2', text: '## ' },
    { label: 'H3', text: '### ' },
    { label: 'Bold', text: '**粗体**' },
    { label: 'Italic', text: '*斜体*' },
    { label: 'Link', text: '[链接描述](https://mp.weixin.qq.com)' },
    { label: 'Image', text: '![图片描述](图片链接)' },
    { label: 'Code', text: '\n```javascript\n// 代码\n```\n' },
    { label: 'Quote', text: '> 引用文字\n' },
    { label: 'List', text: '\n- 列表项\n- 列表项\n- 列表项\n' },
    { label: 'Table', text: '\n| 表头 | 表头 |\n| --- | --- |\n| 内容 | 内容 |\n' },
  ];

  return (
    <ToolbarContainer>
      {tools.map((tool) => (
        <ToolButton
          key={tool.label}
          onClick={() => onInsert(tool.text)}
          title={tool.label}
        >
          {tool.label}
        </ToolButton>
      ))}
    </ToolbarContainer>
  );
};
